<template>
  <div class="job-grid">
    <div v-for="job in filteredJobs" :key="job.id" class="job-card">
      <div class="job-header">
        <h3 class="job-title">{{ job.title }}</h3>
        <span class="job-salary">{{ job.salary }}</span>
      </div>
      <div class="job-details">
        <span>{{ job.location }}</span>
        <span>{{ job.experience }}</span>
        <span>{{ job.education }}</span>
      </div>
      <div class="job-skills">
        <span v-for="skill in job.skills" :key="skill" class="skill-tag">{{
          skill
        }}</span>
      </div>
      <div class="job-company">
        <img :src="job.companyLogo" :alt="job.company" class="company-logo" />
        <span>{{ job.company }}</span>
        <span>{{ job.industry }}</span>
      </div>
      <div v-if="job.online" class="online-status">在线</div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const jobs = [
  {
    id: 1,
    title: '销售助理',
    salary: '4-6K',
    location: '广州',
    experience: '经验不限',
    education: '学历不限',
    skills: ['不接受居家办公'],
    company: '浙江摩根智能',
    industry: '智能硬件',
    companyLogo: '../../../assets/AI.png',
    online: false
  },
  {
    id: 2,
    title: '电商美工/电商视觉设计',
    salary: '6-8K',
    location: '广州',
    experience: '1-3年',
    education: '大专',
    skills: ['亚马逊'],
    company: '泰稳贸易',
    industry: '进出口贸易',
    companyLogo: '/placeholder.svg?height=40&width=40',
    online: true
  },
  {
    id: 3,
    title: '设计组长/主管',
    salary: '11-18K',
    location: '广州',
    experience: '5-10年',
    education: '本科',
    skills: ['视觉设计', '网页设计'],
    company: '骆驼服饰',
    industry: '移动互联网',
    companyLogo: '/placeholder.svg?height=40&width=40',
    online: true
  },
  {
    id: 4,
    title: '销售助理',
    salary: '4-6K',
    location: '广州',
    experience: '经验不限',
    education: '学历不限',
    skills: ['不接受居家办公'],
    company: '浙江摩根智能',
    industry: '智能硬件',
    companyLogo: '/placeholder.svg?height=40&width=40',
    online: false
  },
  {
    id: 5,
    title: '电商美工/电商视觉设计',
    salary: '6-8K',
    location: '广州',
    experience: '1-3年',
    education: '大专',
    skills: ['亚马逊'],
    company: '泰稳贸易',
    industry: '进出口贸易',
    companyLogo: '/placeholder.svg?height=40&width=40',
    online: true
  },
  {
    id: 6,
    title: '设计组长/主管',
    salary: '11-18K',
    location: '广州',
    experience: '5-10年',
    education: '本科',
    skills: ['视觉设计', '网页设计'],
    company: '骆驼服饰',
    industry: '移动互联网',
    companyLogo: '/placeholder.svg?height=40&width=40',
    online: true
  }
  // Add more job listings as needed
]
const filteredJobs = computed(() => {
  // In a real application, you would filter jobs based on the active category
  // For this example, we'll just return all jobs
  return jobs
})
</script>

<style lang="scss" scoped>
.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.job-card {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 15px;
  position: relative;
}
.job-card:hover {
  transform: translateY(-3px);
}
.job-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.job-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.job-salary {
  color: #ff4d4f;
  font-weight: bold;
}

.job-details {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.job-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}

.skill-tag {
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
  color: #666;
}

.job-company {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
}

.company-logo {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
}

.online-status {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #409eff;
  color: white;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
}
</style>
